<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
  <style>
    #container {
      width: 600px;
      margin: auto;
    }

  </style>
</head>

<body style="height: 100%; margin: 0">
  <!-- 渲染图标的容器 -->
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
  <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> -->
  <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> -->
  <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> -->
  <script type="text/javascript">
    //    1-获取容器的dom对象
    var dom = document.getElementById("container");
    // 初始化
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    // 配置对象
    option = {
      xAxis: {
        type: 'category',
        // 横坐标配置信息
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        // 纵坐标的配置信息
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }]
    };;
    if (option && typeof option === "object") {
      // 设置配置对象,完成图片的渲染
      myChart.setOption(option, true);
    }

  </script>
</body>

</html>
